/*
 * @Author: your name
 * @Date: 2020-10-30 10:43:38
 * @LastEditTime: 2020-11-02 14:45:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /Project/DemoNodeProject/src/Pages/BusinessRegisterScreen.js
 */
import React, { Component } from 'react'
import { 
    View, 
    Text,
    TextInput,
    StyleSheet,
    TouchableOpacity } from 'react-native'
import Button from 'apsl-react-native-button'
import CountDownButton from 'react-native-smscode-count-down'

import {registerBusiness} from '../Actions/UserActions'

import { connect } from 'react-redux'
import { Toast } from '@ant-design/react-native'

export class BusinessRegisterScreen extends Component {

    constructor() {
        super();
        this.state = {
            phone:'',                         //手机号

            BusinessName:'',                   //商家名称
            BusinessLocation:'',               //商家位置信息
            longitude:101.52740861306661,      //经度
            latitude:36.653459756738336        //纬度
        };
        
    }
    shouldComponentUpdate(nextProps, nextState) {
        if (this.props.isFetch && !nextProps.isFetch) {
            if (nextProps.code == 200) {
                Toast.success(nextProps.msg)  
            } else {
                Toast.info(nextProps.msg)
            }
        }
        return true
    }


    onChangeText(type, value) {
        this.setState({[type]:value})
    }

    render() {
        return (
            <View style={{flex:1,backgroundColor:'#f8f8f8',padding:30,justifyContent:'center'}}>

                <View style={styles.bigView}>
                  <Text>手机号:</Text>
                  <TextInput
                      placeholder='请输入手机号' 
                      onChangeText={this.onChangeText.bind(this,'phone')}
                      style={{flex:1, textAlign:'right',height:44}}></TextInput>
                </View>

                <View style={[styles.bigView,{paddingRight:0,marginBottom:50}]}>
                  <Text>验证码:</Text>
                  <TextInput
                      placeholder='请输入验证码' 
                      onChangeText={this.onChangeText.bind(this,'BusinessName')}
                      style={{flex:1, textAlign:'right',height:44,marginRight:10}}></TextInput>

                

                <CountDownButton
                      style={{width: 110,marginRight: 0,backgroundColor:'tomato'}}
                      executeFunc={(shouldStartingCounting)=>{
                        this.shouldStartingCounting = shouldStartingCounting
                      }}
                      textStyle={{color: 'white'}}
                      timerCount={60}
                      timerTitle={'获取验证码'}
                      enable={true}

                      // enable={this.state.phone.length > 10}
                      onClick={(shouldStartCountting)=>{
                        //随机模拟发送验证码成功或失败
                        const requestSucc = Math.random() > 0.5;
                          shouldStartCountting(requestSucc)
                      }}
                      timerEnd={()=>{
                        this.setState({
                          state: '倒计时结束'
                        })
                  }}/>
                </View>

                

                
                <View style={styles.bigView}>
                  <Text>商家名称:</Text>
                  <TextInput
                      placeholder='请输入商家名称' 
                      onChangeText={this.onChangeText.bind(this,'BusinessName')}
                      style={{flex:1, textAlign:'right',height:44}}></TextInput>
                </View>

                


                <View style={styles.bigView}>
                  <Text>位置信息:</Text>
                  <TextInput
                      placeholder='请输入位置信息' 
                      onChangeText={this.onChangeText.bind(this,'BusinessLocation')}
                      style={{flex:1, textAlign:'right',height:44}}></TextInput>
                </View>

                <Button
                    isLoading={this.props.isFetch} 
                    style={styles.buttonStyle} 
                    onPress={this.commit}
                    textStyle={{color:'white'}}>注   册</Button>
            </View>
        )
    }

    //注册
    commit = () => {
        this.props.registerBusiness({...this.state})
    }
}

const mapStateToProps = (state) => {
    let {isFetch, code, data, msg} = state.UserInfo.register || '';
    return {
        isFetch, 
        code, 
        data, 
        msg
    }
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        registerBusiness: (paramter)=> dispatch(registerBusiness(paramter))    
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(BusinessRegisterScreen)

const  styles = StyleSheet.create({
    buttonStyle: {
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'tomato',
        height:44,
        borderRadius:22, 
        borderColor:'#00000000'
    },
    bigView:{
        paddingLeft:10,
        paddingRight:10,
        marginBottom:10,
        flexDirection:'row', 
        width:'100%', 
        height:44, 
        backgroundColor:'white',
        borderRadius:5,
        alignItems:'center'
    }
})